<style>
    .tpl-lists{
        min-width: 700px;
        border: 1px solid #ccc;
        overflow: hidden;
    }
    .tpl-list{

        width: 100%;
        height: auto;
        padding: 5px;
        border-bottom: 1px solid #ccc;
        overflow: hidden;
        line-height: 30px;

    }
    .tpl-list.default{

        background: #e7e7e7;

    }
    .tpl-list:last-child{

        border: none;

    }
    .rlb-no{

        border-left:none !important;
        border-right: none !important;

    }
    .areas{

        width: 20%;

    }
    .first,.first-price,.other,.other-price,.do-action{

        width: 14%;
        margin-left: 10px;


    }

</style>
    <div class="col-xs-12 col-md-12 col-lg-12 padding-none lists">
        <div class="col-lg-2 col-md-3 col-xs-5 filed-name text-right"><pub>*</pub>模板名称:</div>
        <div class="col-lg-3 col-md-5 col-xs-7 filed-from padding-none">
            <input name="title" type="text" autocomplete="off" class="form-control radius-none" placeholder="请输入模板名称" >
        </div>
    </div>
    <div class="col-xs-12 col-md-12 col-lg-12 padding-none lists">
        <div class="col-lg-2 col-md-3 col-xs-5 filed-name text-right">运费模板:</div>
        <div class="col-lg-10 col-md-9 col-xs-7 filed-from padding-none">
            除指定地区外，其余地区的运费采用"默认运费",如果设置为0,或是不填写,则为免费
        </div>
    </div>
    <div class="col-xs-12 col-md-12 col-lg-12 padding-none lists">
        <div class="col-lg-2 col-md-3 col-xs-5 filed-name text-right"></div>
        <div class="col-lg-8 col-md-7 col-xs-7 filed-from padding-none">
            <div class="tpl-lists">
                <div class="tpl-list default _data">
                    <div class="input-group input-group-sm">
                        <span class="input-group-addon radius-none">默认运费:</span>
                        <input type="number" name="snum" value="1" data-type="int" class="form-control radius-none text-center">
                        <span class="input-group-addon radius-none rlb-no">件内,</span>
                        <input type="text" name="sprice" value="0.00" data-type="price" class="form-control radius-none text-center">
                        <span class="input-group-addon radius-none rlb-no">元,</span>
                        <span class="input-group-addon radius-none rlb-no">每增加</span>
                        <input type="number" name="xnum" value="1" data-type="int" class="form-control radius-none text-center">
                        <span class="input-group-addon radius-none rlb-no">件,</span>
                        <span class="input-group-addon radius-none rlb-no">增加运费</span>
                        <input type="text" name="xprice" value="0.00" data-type="price" class="form-control radius-none text-center">
                        <span class="input-group-addon radius-none">元</span>
                    </div>
                </div>

                <div class="tpl-list">
                    <div class="areas pull-left">运送到</div>
                    <div class="first pull-left">首件(件)</div>
                    <div class="first-price pull-left">首费(元)</div>
                    <div class="other pull-left">续件(件)</div>
                    <div class="other-price pull-left">续费(元)</div>
                    <div class="do-action pull-left">操作</div>
                </div>


            </div>
        </div>
    </div>
    <div class="col-xs-12 col-md-12 col-lg-12 lists text-right">
        <button class="btn btn-default radius-none" id="add" type="button">为指定城市设置运费</button>
        <button class="btn btn-success radius-none save" type="button">保存</button>
    </div>
<script>

    $(function(){
        var areas = {};//储存每个指定区域的区域对象

        var tpl_nums = 0;//

        //提交数据
        $('.save').unbind('click');

        $('.save').click(function(){


            var id = $(this).attr('id');
            var data = {};

            var transport_title = $('input[name="title"]').val();

            if(!transport_title)
            {

                layer.msg('请填写模板名称',{offset:0,shift:6});
                return false;

            }
            $('._data').each(function(i){

                var id = $(this).attr('id');

                data[i] = {};
                data[i]['areas'] = areas[id];
                data[i]['transport_title'] = transport_title;
                data[i].is_default = 2;

                if($(this).hasClass('default'))
                    data[i].is_default = 1;


                $('input',$(this)).each(function(){

                    data[i][$(this).attr('name')] = $(this).val()

                });

            });

            layer.load();
            //建立第一次请求
            $.post('<?php echo U("Admin/Logistics/FreightTpl/createTransport")?>',{

                data:{
                    'title':transport_title,
                }


            },function(result){

                if(result.code == 200){

                    sends(0,result.data.id);

                }else{

                    showMessage(result.msg,result.code,'','',2000);

                }

            });


            function sends(level,transport_id){

                if(!transport_id) return false;

                var send_nums = $('._data').length;
                if(level+1 <= send_nums){

                    var datas = data[level];

                    datas.transport_id = transport_id;
                    $.post('<?php echo U("Admin/Logistics/FreightTpl/createTransportExtend")?>',{'data':datas},function(result){

                        if(result.code == 200){

                            sends(level+1,transport_id);

                        }else{

                            showMessage(result.msg,result.code,'','',2000);

                        }

                    });

                }else{

                    layer.closeAll();
                    layer.msg('保存成功',{offset:0});

                    return false;

                }

            }


        });


        //添加一行指定城市运费
        $('#add').click(function(){

            tpl_nums = tpl_nums + 1;

            var str = '\
            <div class="tpl-list _data" id="tpl_'+ tpl_nums +'">\
                <div class="areas pull-left"data-container="body" data-toggle="popover" data-placement="left" data-content="未设置地区">\
                    未设置地区\
                </div>\
                <div class="first pull-left">\
                    <div class="input-group input-group-sm">\
                        <input name="snum" type="number" value="1" data-type="int" class="form-control radius-none text-center">\
                    </div>\
                </div>\
                <div class="first-price pull-left">\
                    <div class="input-group input-group-sm">\
                        <input type="text" name="sprice" value="0.00" data-type="price" class="form-control radius-none text-center">\
                        <span class="input-group-addon radius-none">元</span>\
                    </div>\
                </div>\
                <div class="other pull-left">\
                    <div class="input-group input-group-sm">\
                        <input type="number" name="xnum" value="1" data-type="int" class="form-control radius-none text-center">\
                    </div>\
                </div>\
                <div class="other-price pull-left">\
                    <div class="input-group input-group-sm">\
                        <input type="text" name="xprice" value="0.00" data-type="price" class="form-control radius-none text-center">\
                        <span class="input-group-addon radius-none">元</span>\
                    </div>\
                </div>\
                <div class="do-action pull-left">\
                    <a class="btn btn-danger btn-xs delete radius-none" href="javascript:;">删除</a>\
                    <a class="btn btn-primary btn-xs edit radius-none" href="javascript:;">设置区域</a>\
                </div>\
            </div>';

            $('.tpl-lists').append(str);

            areas["tpl_"+tpl_nums] = [];
        });

        $('.tpl-lists').undelegate('.areas','click');
        $('.tpl-lists').delegate('.areas','mouseover',function(){

            $(this).popover('show');

        });
        $('.tpl-lists').undelegate('.areas','click');
        $('.tpl-lists').delegate('.areas','mouseout',function(){

            $(this).popover('hide');

        });

        //删除指定区域
        $('.tpl-lists').undelegate('.delete','click');
        $('.tpl-lists').delegate('.delete','click',function(){

            var _this = $(this);


            layer.msg('确定删除吗?', {
                time: 0 //不自动关闭
                ,btn: ['删除', '关闭']
                ,yes: function(index){

                    layer.close(index);

                    _this
                            .parent()
                            .parent()
                            .fadeOut(200,function(){

                                $(this).remove();

                                var id = $(this).attr('id');

                                //清除节点的数据
                                delete areas[id];

                            })

                }
            });

        });

        //规范表单里面的数据
        $('.tpl-lists').undelegate('input','blur');
        $('.tpl-lists').delegate('input','blur',function(){

            var type = $(this).data('type');

            var value = $(this).val();

            if(type == 'int'){

                $(this).val(Number(value))

            }else if(type == 'price'){

                var val = !isNaN(parseFloat(value).toFixed(2)) ? parseFloat(value).toFixed(2) : '0.00' ;

                $(this).val(val);

            }
        });

        //添加地区信息
        //删除指定区域
        $('.tpl-lists').undelegate('.edit','click');
        $('.tpl-lists').delegate('.edit','click',function(){

            var _this = $(this);
            layer.load();
            $.post("<?php echo U('Admin/Logistics/FreightTpl/getSellArea');?>",function(result){

                layer.closeAll();

                var id  = _this.parent().parent().attr('id');

                layer.open({
                    type: 1,
                    skin: 'layui-layer-rim', //加上边框
                    area: ['80%', '80%'], //宽高
                    content: result,
                    btn: ['选择', '关闭'],
                    yes: function(index,layero){

                        //获取数据
                        var areas_data = {};
                        var names = '';
                        $("input[type='checkbox']:checked",layero).each(function(){

                            var name = $(this)
                                    .parent()
                                    .text()
                                    .replace(/\s/g,"");

                            var type = $(this).data('type');//获取类型  省||市||县

                            areas_data[$(this).val()] = name+'-'+type;

                            names += name+', ';

                        });

                        names = names.substring(0,names.length-1);

                        _this
                                .parent()
                                .parent()
                                .children()
                                .first()
                                .attr('data-content',names);

                        names = names.substr(0, 14);

                        _this
                                .parent()
                                .parent()
                                .children()
                                .first()
                                .text(names+'...');

                        areas[id] = areas_data;

                        layer.close(index);

                    },
                    success: function(layero, index){

                        for(var s in areas){

                            if(id == s){

                                for(var i in areas[s]){

                                    $('#'+i)[0].checked = true;

                                }

                            }else{

                                for(var i in areas[s]){

                                    $('#'+i)
                                            .attr('disabled','disabled')
                                            .parent()
                                            .css('color','#999')


                                }

                            }

                        }

                    }
                });

            });

        });

    });

</script>